<template>
  <a-card :bordered="false">
    <!-- 查询区域 -->
    <div class="table-page-search-wrapper">
      <a-form layout="inline" @keyup.enter.native="searchQuery">
        <a-row :gutter="24">
        </a-row>

      </a-form>
    </div>
    <!-- 查询区域-END -->

    <!-- 操作按钮区域 -->
    <div class="table-operator">
      <a-button @click="addClubConsiltation" type="primary" icon="plus">新增</a-button>
      <a-dropdown v-if="selectedRowKeys.length > 0">
        <a-menu slot="overlay">
          <a-menu-item key="1" @click="batchDel">
            <a-icon type="delete" />删除</a-menu-item>
        </a-menu>
        <a-button style="margin-left: 8px"> 批量操作
          <a-icon type="down" />
        </a-button>
      </a-dropdown>
    </div>

    <!-- table区域-begin -->
    <div>
      <div class="ant-alert ant-alert-info" style="margin-bottom: 16px;">
        <i class="anticon anticon-info-circle ant-alert-icon"></i> 已选择 <a style="font-weight: 600">{{ selectedRowKeys.length }}</a>项
        <a style="margin-left: 24px" @click="onClearSelected">清空</a>
      </div>

      <a-table ref="table" size="middle" :scroll="{x:true}" bordered rowKey="id" :columns="columns" :dataSource="dataSource"
        :pagination="ipagination" :loading="loading" :rowSelection="{selectedRowKeys: selectedRowKeys, onChange: onSelectChange}"
        class="j-table-force-nowrap" @change="handleTableChange">


        <template slot="avatarslot" slot-scope="text, record">
          <div class="anty-img-wrap">
            <a-avatar shape="square" :src="getAvatarView(record.avatar)" icon="logo" />
          </div>
        </template>

        <template slot="piclot" slot-scope="text, record">
            <a :href="record.dynamicVideo" target="_blank" v-if="record.dynamicVideo">
              <img :src="record.dynamicVideo + '?x-oss-process=video/snapshot,t_7000,f_jpg,w_1000,h_800,m_fast'" width="150"
                height="140" />
            </a>
            
            <viewer v-if="record.dynamicImg" :images="record.dynamicImg.split(',')">
              <a v-for="(src,index) in record.dynamicImg.split(',')">
                <!-- <img :src="src" width="150" height="140" v-if="index == 0"/> -->
                <img :src="src" width="150" height="140" v-if="index == 0" />
                <img :src="src" width="150" height="140" v-if="index > 0" hidden />
                <br v-if="index%3 == 2" />
              </a>
            </viewer>

<!--          <div v-if="record.dynamicImg">
            <viewer>
              <img :src="record.dynamicImg" width="150" height="140" />
            </viewer>
          </div> -->
          

        </template>

        <span slot="action" slot-scope="text, record">
<!--          <a @click="handleEdit(record)">编辑</a>
          <span v-if="record.type == 2">
            <a-divider type="vertical" />
          </span> -->

          <a-divider type="vertical" />
          <a-dropdown>
            <a class="ant-dropdown-link">更多
              <a-icon type="down" /></a>
            <a-menu slot="overlay">
              <a-menu-item>
                <a @click="getDynamicInfo(record)">详情</a>
              </a-menu-item>
              <a-menu-item>
                <a-popconfirm title="确定删除吗?" @confirm="() => handleDelete(record.id)">
                  <a>删除</a>
                </a-popconfirm>
              </a-menu-item>
            </a-menu>
          </a-dropdown>
        </span>

      </a-table>
    </div>

    <dynamic-modal ref="modalForm" @ok="modalFormOk" sync></dynamic-modal>

    <a-modal v-model="addVisible" title="新增" @ok="handleOk">
      
       <!-- <div>
          <a-radio-group v-model="radioCheckValue" @change="raioOnChange">
            <a-radio :value="1">
              图片
            </a-radio>
            <a-radio :value="2">
              视频
            </a-radio>
          </a-radio-group>
        </div> -->
      <a-form-model :model="form" :label-col="labelCol" :wrapper-col="wrapperCol">
        <a-form-model-item label="社团资讯">
          <a-textarea v-model="form.dynamicContent" />
        </a-form-model-item>

        
        <a-form-model-item label="图片/视频" v-if="radioCheckValue == '1'">
          <a-upload 
            action="http://jsheng.dongdukeji.com/jeecg-boot/oss/file/upload" 
            class="avatar-uploader"  
            text="上传" 
            :default-file-list="fileList"
            :file-list="fileList"
            list-type="picture-card"
            @change="handleChange">
            
            <div v-if="fileList.length < 9">
            <a-button>
              <a-icon type="upload" />上传
            </a-button>
              </div>
          </a-upload>
        </a-form-model-item>
        
        
<!--        <a-form-model-item :wrapper-col="{ span: 14, offset: 4 }">
          <a-button type="primary" @click="onSubmit">
            Create
          </a-button>
          <a-button style="margin-left: 10px;">
            Cancel
          </a-button>
        </a-form-model-item> -->
      </a-form-model>
    </a-modal>


  </a-card>
</template>

<script>
  import '@/assets/less/TableExpand.less'
  import {
    mixinDevice
  } from '@/utils/mixin'
  import {
    JeecgListMixin
  } from '@/mixins/JeecgListMixin'
  import {
    putAction,
    getFileAccessHttpUrl,
    getAction
  } from '@/api/manage'
  import JInput from '@comp/jeecg/JInput'

  import DynamicModal from './modules/DynamicModal'


  export default {
    name: "ClubConsultationList",
    mixins: [JeecgListMixin, mixinDevice],
    components: {
      DynamicModal,
      JInput
    },
    data() {
      return {
        radioCheckValue:'1',  
        fileList:[],
        labelCol: {
          span: 4
        },
        wrapperCol: {
          span: 14
        },
        form: {},
        addVisible: false,
        dynamicInfo: {},
        imgs: [],
        visible: false,
        dynamicInfoVisible: false,
        confirmLoading: false,
        description: '社团资讯管理页面',
        // 表头
        columns: [{
            title: '#',
            dataIndex: '',
            key: 'rowIndex',
            width: 60,
            align: "center",
            customRender: function(t, r, index) {
              return parseInt(index) + 1;
            }
          },
          {
            title: '用户昵称',
            align: "center",
            dataIndex: 'nicakname'
          },
          {
            title: '发布时间',
            align: 'center',
            dataIndex: 'createTime'
          },
          {
            title: '咨询内容',
            align: "center",
            dataIndex: 'dynamicContent',
            
            ellipsis: true,
          },
          {
            title: '资讯图片',
            align: "center",
            dataIndex: 'dynamicImg',
            scopedSlots: {
              customRender: 'piclot'
            }
          },
          {
            title: '操作',
            dataIndex: 'action',
            align: "center",
            fixed: "right",
            width: 147,
            scopedSlots: {
              customRender: 'action'
            }
          }
        ],
        url: {
          list: "/dynamic/dynamic/findAllconsultation",
          delete: "/dynamic/dynamic/delete",
          deleteBatch: "/dynamic/dynamic/deleteBatch",
          exportXlsUrl: "/dynamic/dynamic/exportXls",
          importExcelUrl: "dynamic/dynamic/importExcel",
        },
        dictOptions: {},
      }
    },
    created() {},
    computed: {
      importExcelUrl: function() {
        return `${window._CONFIG['domianURL']}/${this.url.importExcelUrl}`;
      },
    },
    methods: {
      getAvatarView: function(avatar) {
        return getFileAccessHttpUrl(avatar)
      },
      initDictConfig() {},
      handleOk() {
        var imgListStr = "";
        let imgList = [];
        for(var i = 0; i< this.fileList.length; i++){
            imgList.push(this.fileList[i].response.result);
        }
        imgListStr = imgList.join(",");
        this.form.dynamicImg = imgListStr;
        this.axios.post("/dynamic/dynamic/releaseConsultation", this.form).then((res) => {
          this.addVisible = false;
          this.loadData();
          this.fileList = [];
        });
        this.fileList = [];
        this.dynamicInfoVisible = false;
      },
      addClubConsiltation() {
        this.fileList = [];
        this.form = {};
        this.addVisible = true;
      },
      handleChange({fileList}) {
        var fileListArray = [];
        // console.log(info.file.response.result);
        this.fileList = fileList;
        // console.log(this.form.dynamicImg);
        // console.log(info);
        console.log(this.fileList);
      },
      onSubmit() {

      },
      raioOnChange(e){
        console.log('radio checked',e.target.value);
        this.fileList = [];
      }
    }
  }
</script>
<style scoped>
  @import '~@assets/less/common.less';
</style>
